<template>
  <div>
    <AForm :model="searchFrom" class="erp-search-form">
      <ARow class="grid-demo" :gutter="10">
        <ACol :span="6">
          <AFormItem hide-label>
            <ARangePicker
              v-model="searchFrom.dates"
              :placeholder="['开始月份', '结束月份']"
              value-format="YYYY-MM-DD"
              :allow-clear="false"
            />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem hide-label>
            <AInput v-model="searchFrom.accountName" placeholder="账户名称" allow-clear />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem hide-label>
            <AInput v-model="searchFrom.feeCategory" placeholder="费用分类" allow-clear />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem hide-label>
            <AInput v-model="searchFrom.usedObj" placeholder="作用对象" allow-clear />
          </AFormItem>
        </ACol>
        <ACol :span="6">
          <AFormItem hide-label>
            <ASelect v-model="searchFrom.statType" placeholder="费用类型" allow-clear>
              <AOption label="收入" :value="0"></AOption>
              <AOption label="支出" :value="1"></AOption>
            </ASelect>
          </AFormItem>
        </ACol>
      </ARow>
    </AForm>
    <ACard>
      <div class="erp-mb-10 w100 erp-search-btn-box">
        <ASpace>
          <AButton type="primary" @click="onSearch">
            <template #icon>
              <icon-search />
            </template>
          </AButton>
          <ATooltip content="清空筛选项" position="top">
            <AButton type="dashed" @click="onReset">
              <template #icon>
                <icon-refresh />
              </template>
            </AButton>
          </ATooltip>
        </ASpace>
        <!-- <ASpace>
          <AButton type="primary" @click="onExport('table')">导出</AButton>
        </ASpace> -->
      </div>
      <ATable :pagination="false" :data="tableData" :bordered="{ cell: true }" column-resizable>
        <template #columns>
          <ATableColumn title="序号" data-index="rowIndex" :width="65" align="center">
            <template #cell="{ rowIndex }">
              <div>{{ rowIndex + 1 }}</div>
            </template>
          </ATableColumn>
          <ATableColumn title="日期" data-index="createdDt" :width="170">
            <template #cell="{ record }">
              {{ dayjs(record.createdDt).format('YYYY-MM-DD') }}
            </template>
          </ATableColumn>
          <ATableColumn title="帐户名称" data-index="accountName" :width="255"> </ATableColumn>
          <ATableColumn title="费用分类" data-index="feeCategory" :width="255"> </ATableColumn>
          <ATableColumn title="作用对象" data-index="usedObj" :width="120"> </ATableColumn>
          <ATableColumn title="收入金额" data-index="incomeAmt" :width="130"> </ATableColumn>
          <ATableColumn title="支出金额" data-index="expendAmt" :width="100" align="center">
          </ATableColumn>
          <ATableColumn title="备注" data-index="remark" :width="200"> </ATableColumn>
        </template>
      </ATable>
    </ACard>
  </div>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import {
  getIncomeExpendDetailStat,
  IncomeExpendDetailStatRes,
  IncomeExpendDetailStatSearch
} from '@renderer/api/financialSheet'

const searchFrom = ref<IncomeExpendDetailStatSearch>({
  dates: [
    dayjs().startOf('year').format('YYYY-MM-01'),
    dayjs().endOf('month').format('YYYY-MM-DD')
  ],
  startDate: '',
  endDate: '',
  accountName: '',
  feeCategory: '',
  usedObj: ''
})
const tableData = ref<IncomeExpendDetailStatRes[]>([])

onMounted(() => {
  getTableData()
})

async function getTableData() {
  const [createdStartDate, createdEndDate] = searchFrom.value.dates! || []
  searchFrom.value.startDate = createdStartDate
  searchFrom.value.endDate = createdEndDate
  const res = await getIncomeExpendDetailStat({ ...searchFrom.value })
  tableData.value = res.data.list
}

function onSearch() {
  getTableData()
}
function onReset() {
  searchFrom.value = {
    dates: [
      dayjs().startOf('year').format('YYYY-MM-01'),
      dayjs().endOf('month').format('YYYY-MM-DD')
    ],
    startDate: '',
    endDate: '',
    accountName: '',
    feeCategory: '',
    usedObj: ''
  }
  getTableData()
}
</script>
<style lang="less" scoped>
.erp-search-btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
